<div nz-row nzType="flex" nzAlign="strecth" nzGutter="16" class="py-md">

  <div nz-col nzSpan="24">
    <nz-card [nzBordered]="false" class="card-top">
      <div nz-row nzType="flex" nzJustify="space-between" nzAlign="middle" [nzGutter]="{md: 12, lg: 16, xl: 24, xxl: 32}">

        <div nz-col>
          <nz-form-item nz-row nzFlex class="mb0">
            <nz-form-label>站点</nz-form-label>
            <nz-form-control>
              <nz-cascader [ngModel]="[siteSrv.site?.companyId, siteSrv.site?.id]" [nzOptions]="siteSrv.sites | siteOption:'tree'" (ngModelChange)="changeSite($event)"
                [nzAllowClear]="false" class="cascader-width-auto"></nz-cascader>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col>
          <button nz-button nzType="primary" (click)="createRole()">
            <i class="anticon anticon-plus"></i>
            <span>创建角色</span>
          </button>
          <nz-dropdown nzPlacement="bottomRight" class="ml-sm">
            <button nz-button nz-dropdown>
              <i class="anticon anticon-ellipsis"></i>
            </button>
            <ul nz-menu>
              <!-- <li nz-menu-item (click)="loadData()">刷新列表</li> -->
              <!-- <li nz-menu-item>批量删除</li> -->
            </ul>
          </nz-dropdown>
        </div>

      </div>
    </nz-card>
  </div>

  <div nz-col class="width-md">
    <nz-card nzTitle="角色" [nzBordered]="false" class="card-nopd height-full mb0">
      <ul nz-menu nzMode="inline" class="border-right-0">
        <li nz-menu-item *ngFor="let item of data.roles" [nzSelected]="params.roleId === item.id" (click)="changeRole(item.id)" class="role-item my0">
          <div nz-row nzType="flex" nzAlign="middle" nzJustify="space-between">
            <div nz-col class="flex-1 text-truncate pr-sm" [title]="item.roleName">{{item.roleName}}</div>
            <div nz-col class="role-mgnt-tools">
              <i (click)="updateRole(item, $event)" class="anticon anticon-edit point" title="修改角色"></i>
              <nz-popconfirm nzTitle="您确定要删除该角色吗？" (nzOnConfirm)="deleteRole(item)">
                <i nz-popconfirm class="anticon anticon-delete point" title="删除角色"></i>
              </nz-popconfirm>
            </div>
          </div>
        </li>
      </ul>
    </nz-card>
  </div>

  <div nz-col class="flex-1">
    <nz-card [nzBordered]="false" class="card-nopd height-full mb0">

      <nz-tabset class="tabset">

        <nz-tab nzTitle="菜单权限">
          <nz-tree [(ngModel)]="data.menu" [nzCheckable]="true" [nzShowLine]="true" [nzDefaultExpandAll]="true">
            <ng-template #nzTreeTemplate let-menu>
              <span class="tree-menu-name" title="{{menu.origin.i18n | translate}}">
                <i *ngIf="menu.origin.icon" class="{{menu.origin.icon}}"></i>
                <span>{{menu.origin.i18n | translate}}</span>
              </span>
            </ng-template>
          </nz-tree>
        </nz-tab>

        <!-- <nz-tab nzTitle="模块权限">
          <p>该功能暂未开放</p>
        </nz-tab> -->

      </nz-tabset>

      <nz-divider class="mt-sm mb0"></nz-divider>

      <div class="px-lg py-md">
        <button nz-button nzType="primary" (click)="save()">保存</button>
      </div>

    </nz-card>
  </div>

</div>